<style scoped>
.w960 {
  min-width: 960px;
}
.w960 >>>  .el-header {
  padding: 0px;
}
.w960 >>>  .admin_head.active {
  grid-template-columns: 1px 50px auto;
}
.w960 >>>  .admin_head {
  display: grid;
  grid-template-columns: 215px 50px auto;
  transition: grid-template-columns 0.2s;
  line-height: 60px;
  background-color: #e6a23c;
  text-align: center;
}
.w960 >>> .admin_head.active h1 {
  width: 0;
  border: none;
  opacity: 0;
  overflow: hidden;
}
.w960 >>> .admin_head h1 {
  border-right: 1px solid #ccc;
  opacity: 1;
}
.w960 >>> .admin_head.active i {
  text-align: left;
  margin-left: 20px;
}
.w960 >>> .admin_head i {
  line-height: 60px;
  color: ivory;
  cursor: pointer;
}
.w960 >>> .admin_head span {
  text-align: right;
  color: ivory;
  padding-right: 10px;
}
.w960 >>> .left {
  height: calc(100vh - 60px);
  background-color: #fff;
  transition: width 0.2s;
}
.w960 >>> .right {
  background-color: #fff;
  margin-left: 30px;
  height: calc(100vh - 60px);
}
.w960 >>> .xiala {
  float: right;
}
</style>
<template>
  <el-container class="w960">
    <el-header class="admin_head" :class="isCollapse ? 'active' : ''">
      <h1>blog后台管理系统</h1>
      <i class="fa fa-bars fa-2x" @click="isCollapse = !isCollapse"></i>
      <div class="out">
        <el-dropdown class="xiala">
          <span class="el-dropdown-link" style="cursor:pointer;">
            {{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="$router.push('/desk/type/home')">前往前台</el-dropdown-item>
            <el-dropdown-item @click.native="out">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'" class="left">
        <el-menu
          default-active="$route.path"
          class="el-menu-vertical-demo"
          @close="handleClose"
          :router="true"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
        >
          <template v-for="(item, val) in routerList">
            <template v-if="item.path !='write'">
              <template v-if="isAdmin ? true : item.isAdmin == isAdmin">
                <el-menu-item
                  :key="val"
                  :index="'/admin/' + item.path"
                  v-if="!item.children"
                >
                  <i :class="item.icon"></i>
                  <span slot="title">{{ item.name }}</span>
                </el-menu-item>
                <el-submenu v-else :key="val" :index="'/admin/' + item.path">
                  <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.name }}</span>
                  </template>
                  <el-menu-item
                    v-for="(data, k) in item.children"
                    :key="k"
                    :index="'/admin/' + item.path + '/' + data.path"
                  >
                    <i :class="data.icon"></i>
                    <span slot="title">{{ data.name }}</span>
                  </el-menu-item>
                </el-submenu>
              </template>
            </template>
          </template>
        </el-menu>
      </el-aside>
      <el-container class="right">
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data: () => ({
    name: "[empty]",
    isCollapse: false,
    routerList: [],
    isAdmin: false,
  }),
  methods: {
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    out() {
      this.$confirm("真的真的要退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.commit("qiantai/reToKen", "");
          this.$router.push('/desk/type/home');
          this.$message({
            type: "success",
            message: "退出成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消退出~",
          });
        });
    },
  },
  created() {
    this.$store.commit("qiantai/initToKen");
    let { username, isAdmin } = JSON.parse(this.$store.state.qiantai.token || {});
    this.name = username;
    this.isAdmin = isAdmin;
    this.routerList = JSON.parse(JSON.stringify(this.$router.options.routes[2].children));
    // console.log(this.$router.options);
  },
  mounted() {},
  // beforeRouteEnter(to, from, next) {
  //   next((vm) => {
  //     // 通过 `vm` 访问组件实例
  //     let token = null;
  //     if (!vm.$store.state.qiantai.token) {
  //       token = {};
  //     } else {
  //       token = JSON.parse(vm.$store.state.qiantai.token);
  //     }
  //     console.log(token);
  //     console.log(to.meta.isAdmin);
  //     if (token.isAdmin == to.meta.isAdmin) {
  //       next();
  //     } else {
  //       next("/desk/home");
  //     }
  //   });
  // },
};
</script>